<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/component/commonTagLib.jsp" %>

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>项目时间阶段设置</title>
	<%@ include file="/WEB-INF/component/commonCSS.jsp" %> 
	<style type="text/css"> 
		div.box-body { 
			background:url('${ctx}/lib/img/timerbackground.png') no-repeat fixed right;
			min-height: 300px;
		}
		div.timeBox {
            width: 620px;
            height: 120px;
            position: relative;
            z-index: 1;
		}
		div.topBox {
		    margin-bottom: 10px;
		    background:url('${ctx}/lib/img/projectTime/top.png') no-repeat 306px 55px;
		}
		input.timeInput {
            width: 135px;
		}
		span.blue {
		    font-weight: bold;
		    color: #3c8dbc;
		}
		span.red {
		    font-weight: bold;
		    color: #dd4b39;
		}
		div.topLabel {
		    text-align: center;
		    margin-top: 0px;
		}
		div.topDiv {
		    text-align: center;
            margin-top: 10px;
		}
		div.leftBox {
		    width: 330px;
		    margin-top: -72px;
		    background:url('${ctx}/lib/img/projectTime/left.png') no-repeat 107px 0px;
		}
		div.leftIcon {
            position: absolute;
            left: 20px;
            top: 0px;
            width: 71px;
            height: 71px;
            background:url('${ctx}/lib/img/projectTime/appealStarttime.png') no-repeat;
        }
		div.leftLabel {
		    position: absolute;
            left: 120px;
            top: 15px;
            width: 180px;
            height: 35px;
            text-align: center;
		}
		div.leftDiv {
		    position: absolute;
            left: 120px;
            top: 50px;
            width: 180px;
            height: 35px;
            text-align: center;
		}
		div.on-off {
		    position: absolute;
            left: 185px;
            top: 80px;
            width: 48px;
            height: 22px;
            cursor: pointer;
		}
		div.all-on-off {
		    position: absolute;
            left: 385px;
            top: 29px;
            width: 48px;
            height: 22px;
            cursor: pointer;
		}
		div.off {
		    background:url('${ctx}/lib/img/projectTime/end.png') no-repeat;
		}
		div.on {
            background:url('${ctx}/lib/img/projectTime/start.png') no-repeat;
        }
		div.rightBox {
		    width: 330px;
		    margin-left: 290px;
		    margin-top: -72px;
            background:url('${ctx}/lib/img/projectTime/right.png') no-repeat 11px 0px;
        }
        div.rightIcon {
            position: absolute;
            left: 240px;
            top: 0px;
            width: 71px;
            height: 71px;
            background:url('${ctx}/lib/img/projectTime/appealEndtime.png') no-repeat;
        }
        div.rightLabel {
            position: absolute;
            left: 30px;
            top: 15px;
            width: 180px;
            height: 35px;
            text-align: center;
        }
        div.rightDiv {
            position: absolute;
            left: 30px;
            top: 50px;
            width: 180px;
            height: 35px;
            text-align: center;
        }
        div.bottomBox {
            z-index: 0;
            margin-top: -72px;
            padding-top: 48px;
            background:url('${ctx}/lib/img/projectTime/bottom.png') no-repeat 306px 0px;
        }
        div.bottomLabel {
            text-align: center;
        }
        div.bottomDiv {
            text-align: center;
            margin-top: 10px;
        }
        div.text-center {
            width: 620px;
            margin: 0px 0px 30px 0px;
        }
        div.leftCursor, div.rightCursor {
            width: 18px;
            height: 16px;
            position: absolute;
            top: 32px;
        }
        div.leftCursor {
            left: 300px;
        }
        div.rightCursor {
            left: 10px;
        }
	</style>
	<%@ include file="/WEB-INF/component/commonJS.jsp" %> 
</head>
<body class="skin-blue-light sidebar-mini fixed skin-blue-light-frame">
    
    <section class="content-header">
		<h1>项目时间阶段设置</h1>
		<ol class="breadcrumb">
			<li><a href="${ctx}/home.jsp"><i class="fa fa-home"></i>首页</a></li>
			<li class="active">药品招标管理</li>
			<li class="active">采购项目管理</li>
			<li class="active">项目时间阶段设置</li>
		</ol> 
    </section>
    
    <section class="content">
		<div class=" box box-success">
			<form id="form" action="${ctx}/bidProject/setProjTime.html" method="post">
				<input type="hidden" id="projId" name="projId" value="${projId}">
				<div class="box-header with-border">
<h3 class="box-title">${name }</h3>

</div>
				<div class="box-body">
                    <div class="timeBox topBox">
                        <div class="topLabel">项目<span class="blue">开始</span>日期</div>
                        <div class="topDiv">
                        <c:choose>
                        	<c:when test="${projStart.nowStatus }">
                        		${projStart.timeValue }
                        	</c:when>
                        	<c:otherwise>
                        		<input  name = "${projStart.idName }" id = "${projStart.idName }" type="text" value="${projStart.timeValue }" placeholder="yyyy-MM-dd" data-provide="datepicker" data-date-fmt="yyyy-MM-dd" />
                        	</c:otherwise>
                        </c:choose>
                        </div>
                        <c:if test="${! projStart.nowStatus }">
                        	<div class="all-on-off on"></div>
                        </c:if>
                    </div>
                    <input type="hidden" name="curStatus" id="curStatus" value="${projStart.cur_status }">
                    <input type="hidden" name="cur_status" id="cur_status" value="${projStart.cur_status }">
                    <c:forEach items="${info }" var="list" varStatus="vs">
                            <c:choose>
                            	<c:when test="${vs.count % 2 == 1 }">
			                        <div class="timeBox leftBox">
			                        <div class="leftIcon" style="background:url('${ctx}/lib/img/projectTime/${list.idName }.png') no-repeat;"></div>
			                        <div class="leftLabel">${fn:substringBefore(list.timeName,"开始") }<span class="blue">开始</span>${fn:substringAfter(list.timeName,"开始") }</div>
			                        <div class="leftDiv">
			                        <c:choose>
			                        	<c:when test="${projStart.nowStatus || projStart.cur_status > list.curStatus || (projStart.cur_status == list.curStatus && ! list.thisCurStatus) }">
			                        		${list.timeValue }
			                        		<input type="hidden" name = "${list.idName }" id = "${list.idName }" value="${list.timeValue }">
			                        	</c:when>
			                        	<c:otherwise>
			                        		<input  name = "${list.idName }" id = "${list.idName }" type="text" value="${list.timeValue }" placeholder="${list.timeFormat }" data-provide="datepicker" data-date-fmt="${list.timeFormat }" />
			                        	</c:otherwise>
			                        </c:choose>
			                        </div>
			                        <div class="leftCursor"></div>
			                        <c:if test="${! projStart.nowStatus }">
			                        	<c:if test="${list.nowStatus}">
			                        	<script type="text/javascript">
				                        	   $("#curStatus").val('${list.curStatus}');
				                        	   $(".leftCursor").css("background","url('${ctx}/lib/img/timer.png') no-repeat");
				                        	   $(".rightCursor").css("background","url('${ctx}/lib/img/timer.png') no-repeat");
				                        	</script>
			                        	</c:if>
			                        </c:if>
			                        <c:if test="${! projStart.nowStatus && list.thisCurStatus }">
				                        <c:choose>
				                        	<c:when test="${list.nowStatus }">
				                        	<script type="text/javascript">
				                        	   $("#curStatus").val('${list.curStatus}');
				                        	   $(".leftCursor").css("background","url('${ctx}/lib/img/timer.png') no-repeat");
				                        	   $(".rightCursor").css("background","url('${ctx}/lib/img/timer.png') no-repeat");
				                        	</script>
				                        		<div class="on-off on" onclick="change(this,'${list.curStatus}')"></div>
				                        	</c:when>
				                        	<c:otherwise>
				                        	<c:if test="${projStart.curStatus == list.curStatus || list.thisCurStatus}">
				                        		<div class="on-off off" onclick="change(this,'${list.curStatus}')"></div>
				                        	</c:if>
				                        	</c:otherwise>
				                        </c:choose>
			                        </c:if>
			                    	</div>
                            	</c:when>
                            	<c:otherwise>
			                        <div class="timeBox rightBox">
			                        <div class="rightIcon" style="background:url('${ctx}/lib/img/projectTime/${list.idName }.png') no-repeat;"></div>
			                        <div class="rightLabel">${fn:substringBefore(list.timeName,"结束") }<span class="red">结束</span>${fn:substringAfter(list.timeName,"结束") }</div>
			                        <div class="rightDiv">
			                        <c:choose>
			                        	<c:when test="${projStart.nowStatus || projStart.cur_status > list.curStatus || (projStart.cur_status == list.curStatus && ! list.thisCurStatus)}">
			                        		${list.timeValue }
			                        		<input type="hidden" name = "${list.idName }" id = "${list.idName }" value="${list.timeValue }">
			                        	</c:when>
			                        	<c:otherwise>
			                        		<input  name = "${list.idName }" id = "${list.idName }" type="text" value="${list.timeValue }" placeholder="${list.timeFormat }" data-provide="datepicker" data-date-fmt="${list.timeFormat }" />
			                        	</c:otherwise>
			                        </c:choose>
			                        </div>
			                        <div class="rightCursor"></div>
			                        </div>
                            	</c:otherwise>
                            </c:choose>
                     </c:forEach>
                     
                    <div class="timeBox bottomBox">
                        <div class="bottomLabel">项目<span class="red">结束</span>日期</div>
                        <div class="bottomDiv">
                        <c:choose>
			                        	<c:when test="${projStart.nowStatus }">
			                        		${projEnd.timeValue }
			                        	</c:when>
			                        	<c:otherwise>
			                        		<input  name = "${projEnd.idName }" id = "${projEnd.idName }" type="text" value="${projEnd.timeValue }" placeholder="yyyy-MM-dd"  data-provide="datepicker" data-date-fmt="yyyy-MM-dd" />
			                        	</c:otherwise>
			                        </c:choose>
                        
                            
                        </div>
                    </div>
                    <div class="text-center">
                    <c:if test="${! projStart.nowStatus }">
                    <input type="button" class="btn btn-success btn-sm" onclick="validate();" value="保&nbsp;存" />
                    </c:if>
                        
                        <a href="${ctx}/bidProject/toCheckPasswordList.html" class="btn btn-danger btn-sm">返&nbsp;回</a>
                    </div>
				</div>
			</form>
		</div>
    </section>
    
    <script type="text/javascript">
    
        function change(obj,val){
        	if ($(obj).hasClass("on")) {
    			$(obj).removeClass("on").addClass("off");
    			$("#curStatus").val("");
    		} else {
    			if ($("div.all-on-off").hasClass("off")){
    				$.HN.message.alert('招标时间已关闭，不能设置！', '信息', 'warn');
    				return;
    			}
    			$("div.on-off").removeClass("on").addClass("off");
                $(obj).addClass("on");
                $("#curStatus").val(val);
    		}
        }
        
        
		function validate() {
        	
    		$.HN.message.confirm("确定保存吗？", '', '').on(function (e) {
         		 if(e){
         			 $('#form').submit();
   	 				}
		 
	 		});
           
        }
    	
        $('#form').ajaxForm({
            dataType : "json",
            timeout: 10000,
            success : function(result) {
                if (result.success) {
                    //$.alert("操作成功！", "success");
                    window.location.href="${ctx}/bidProject/tosetProjTime.html?projId=${projId}&oper=1"
                } else {
                    $.alert(result.msg || "操作失败！", "error");
                }
            }
        });
        
        $(document).ready(function() {
        	var msg = "${oper}";
        	if (msg.length > 0){
        		$.alert("操作成功！", "success");
        	}
        	$("div.all-on-off").click(function() {
        		if ($(this).hasClass("on")) {
        			$("#curStatus").val("13");
        			$(this).removeClass("on").addClass("off");
        			$("div.on-off").removeClass("on").addClass("off");
        			$(".leftCursor").css("background","");
             	   $(".rightCursor").css("background","");
        		} else {
        			$(this).removeClass("off").addClass("on");
        			$("#curStatus").val("0");
        		}
        	});
        });
    </script>

</body>
</html>










